<style lang='less' scoped>
    .h-panel-bar {
        border: none;
    }
</style>

<template>
    <div class="users-vue frame-page h-panel">
        <div class="h-panel h-panel-no-border">
            <div class="h-panel-bar">
                <span class="h-panel-title">
                  <i class="h-icon-search"></i> 筛选搜索
                </span>
                <span class="h-panel-right">
                  <Button @click="reset">重置</Button>
                  <Button color="blue" @click="search">查询结果</Button>
                </span>
            </div>
            <div class="h-panel-body bottom-line">
                <Form ref="form" :model="params" mode="threecolumn">
                    <FormItem label="名称" prop="name">
                        <input v-model="params.name" type="text" />
                    </FormItem>
                </Form>
            </div>
        </div>

        <div class="h-panel-bar">
      <span class="h-panel-title">
        <i class="icon-grid-2"></i> 数据列表
      </span>
            <div class="h-panel-right">
                <Button color="green" @click="add">新增</Button>
                <Button color="green" @click="detail">详情</Button>
                <Button color="green" @click="update">修改</Button>
                <Button color="green" @click="del">删除</Button>
                <!-- <Button color="green" @click="exp()">导出</Button> -->
            </div>
        </div>

        <div class="h-panel-body">
            <!--
               stripe 栅格背景显示
               serial 序号
               loading 数据记载进度条
            -->
            <Table
                    ref="table"
                    :datas="datas"
                    :stripe="true"
                    :loading="loading"
                    :checkbox="true"
                    selectWhenClickTr
            >
                <TableItem title="序号" prop="$serial" v-if="true" :width="50"></TableItem>
                <TableItem title="id" prop="id" v-if="false"></TableItem>
                 <#list table.fields as field>
                    <TableItem title="${field.comment}" prop="${field.propertyName}"></TableItem>
                 </#list>
                <div slot="empty">自定义提醒：暂时无数据</div>
            </Table>
            <p></p>
            <!-- 分页模块 -->
            <Pagination align="right" v-model="pagination" @change="changePage()" />
        </div>
    </div>
</template>


<script>
    //初始化请求参数列表
    function initParams() {
        return {
            name: null
        };
    }

    export default {
        data() {
            return {
                loading: false,
                datas: [],
                pagination: {
                    page: 1,
                    size: 10,
                    total: 0
                },
                params: initParams()
            };
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.loading = true;
                //分页参数
                this.params.current = this.pagination.page;
                this.params.size = this.pagination.size;

                R.${entity}.list(this.params).then(resp => {
                    if (resp.ok) {
                    this.datas = resp.data;
                    this.datas = [];
                    resp.data.records.forEach(item => {
                        this.datas.push(item);
                });
                    this.pagination.page = resp.data.pageNum;
                    this.pagination.size = resp.data.pageSize;
                    this.pagination.total = resp.data.total;
                }
            });
                this.loading = false;
            },
            //切换分页
            changePage() {
                this.init();
            },
            //查询
            search() {
                this.init();
            },
            //新增
            add() {
                this.$router.push({name: "${entity}-Add"});
            },
            //修改
            update(){
                if (this.checkSelectNone() && this.checkSelectJustOne()) {
                    var selectRow = this.$refs.table.getSelection();
                    this.$router.push({
                        name: "${entity}-Update",
                        params: {
                            id: selectRow[0].id
                        }
                    });
                }
            },
            //详情
            detail() {
                const checkSelectNone = this.checkSelectNone();
                const checkSelectJustOne = this.checkSelectJustOne();
                if (checkSelectNone && checkSelectJustOne) {
                    var selectRow = this.$refs.table.getSelection();
                    this.$router.push({
                        name: "${entity}-Detail",
                        params: {
                            id: selectRow[0].id
                        }
                    });
                }
            },
            //删除
            del() {
                const checkSelectNone = this.checkSelectNone();
                const checkSelectJustOne = this.checkSelectJustOne();
                var selectRow = this.$refs.table.getSelection();
                if (checkSelectNone && checkSelectJustOne) {
                    this.$Confirm('是否确定删除【'+selectRow[0].name+'】？').then(() => {
                        R.${entity}.del(selectRow[0].id).then(resp => {
                        if (resp.ok) {
                        this.$Message("删除成功");
                        this.init();
                    }
                });
                }).catch(() => {
                        this.$Message.error('取消');
                });
                }
            },
            //重置
            reset() {
                this.params = initParams();
            },
            //校验：只能选择一个
            checkSelectJustOne() {
                var selectRow = this.$refs.table.getSelection();
                if (selectRow.length >= 2) {
                    this.$Message("请选择其中一条数据进行操作");
                    return false;
                }
                return true;
            },
            //校验：需要选择一条
            checkSelectNone() {
                var selectRow = this.$refs.table.getSelection();
                if (selectRow.length == 0) {
                    this.$Message("请选择其中一条数据进行操作");
                    return false;
                }
                return true;
            }
        }
    };
</script>
